<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我的粉丝-农业知识交流论坛</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mycss.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_x7u3h1yrrfc.css">
    <style>
        #table-title tr th{
            border: none;
        }
    </style>
</head>
<body>

<div th:replace="~{common/header::header(activeUrl='user')}"></div>

<main role="main" class="container">
    <div class="row">

        <aside class="col-md-3 blog-sidebar" th:fragment="userShowPanel">

            <div class="p-4 my-3 bg-white rounded shadow-sm">

                <div class="mb-0"><!--1-->
                    <p class="text-center">
                         <img th:src="${session.loginUser.getAvatar()}" style="border-radius: 50%;position: relative" width="80" height="80">
                    </p>
                    <br>
                    <div class="text-center">
                        <br>
                        <span th:text="${session.loginUser.getUsername()}"></span>

                        <br>
                        <p class="text-center">
                            <small th:text="${#strings.abbreviate(userInfo.getBrief(),25)}"></small>
                        </p>
                        <br>
                        <p>
                        <table class="table">
                            <thead id="table-title">
                                <tr>
                                    <th scope="col">文章</th>
                                    <th scope="col">关注</th>
                                    <th scope="col">粉丝</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td th:text="${articleCount}">0</td>
                                    <td th:text="${followCount}">0</td>
                                    <td th:text="${fansCount}">0</td>
                                </tr>
                            </tbody>
                        </table>
                        </p>
                    </div>
                </div><!--1-->
                <hr>
                <div class="mb-0">
                    <div th:replace="user/index::userbtn"></div>
                </div>
            </div>

        </aside>

        <div class="col-md-9 blog-main">

            <br>
            <hr class="layui-bg-blue">

            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <div id="fancenter"   th:fragment="fancenter">
                <!--如果没有关注-->
                <div th:if="${fans.getDatas().size()<=0}">
                    <div class="media text-muted pt-3">还没有人关注你，多发表文章提升下活跃~ &emsp;&emsp;
                    </div>
                </div>
                <!--如果有关注-->
                <div th:if="${fans.getDatas().size()>0}" id="isfol">
                    <div th:each="fan:${fans.getDatas()}" class="media text-muted pt-3">
                        <!-- 头像 -->
                        <img th:src="${fan.getAvatar()}" style="border-radius: 5px " width="32" height="32">

                        <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px;overflow: hidden;text-overflow: ellipsis;">

                            <a th:text="${fan.getNickname()}" style="font-size: 14px"
                               th:href="@{'/article/'+${fan.getUid()}}"
                               class="text-dark font-weight-bold text-decoration-none d-block" target="_blank">
                            </a>

                            <span th:text="${fan.getBrief()!=''?fan.getBrief():'此人很懒，什么都没有写'}"
                                  class="badge u-content-tab" style="font-size: 13px">
                            </span>&emsp;
                            <span class="fid" style="display: none;" th:text="${fan.getUid()}"></span>
                            <a href="javascript:void(0);"
                               th:onclick="isaddFollow([[${session.loginUser.getUid()}]],[[${fan.getUid()}]],this)">
                                <span class="badge float-right u-btn-del isf" ></span>
                            </a>

                        </p>
                    </div>

                    <!--分页-->
                    <nav aria-label="Page navigation example" class="mt-4">
                    <ul class="pagination justify-content-center pagination-sm">
                        <li th:class="${fans.getPageInfo().isHasPreviousPage()==true?'page-item':'page-item disabled'}">
                            <a class="page-link" th:href="@{'/followfa/'+${session.loginUser.getUid()}+'/'+${fans.getPageInfo().pageNum -1}+'/20'}" tabindex=""><&nbsp;</a>
                        </li>
                        <li class="page-item" th:if="${fans.getPageInfo().isHasPreviousPage()}">
                            <a class="page-link" th:href="@{'/followfa/'+${session.loginUser.getUid()}+'/'+${fans.getPageInfo().pageNum -1}+'/20'}" th:text="${fans.getPageInfo().pageNum -1}"></a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" th:href="@{'/followfa/'+${session.loginUser.getUid()}+'/'+${fans.getPageInfo().pageNum}+'/20'}" th:text="${fans.getPageInfo().pageNum}"></a>
                        </li>
                        <li class="page-item" th:if="${fans.getPageInfo().isHasNextPage()}">
                            <a class="page-link" th:href="@{'/followfa/'+${session.loginUser.getUid()}+'/'+${fans.getPageInfo().pageNum +1}+'/20'}" th:text="${fans.getPageInfo().pageNum +1}"></a>
                        </li>
                        <li th:class="${fans.getPageInfo().isHasNextPage()==true?'page-item':'page-item disabled'}">
                            <a class="page-link"  th:href="@{'/followfa/'+${session.loginUser.getUid()}+'/'+${fans.getPageInfo().pageNum +1}+'/20'}" >&nbsp;></a>
                        </li>
                    </ul>
                </nav>
                </div>
                </div>

            </div>
        </div>

    </div>

    <hr class="layui-bg-blue">
</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top"><i class="iconfont icon-fanhuidingbu1" style="font-size:50px;color: #007bff"></i></a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script th:src="@{/js/daohang.js}"></script>
<script th:src="@{/js/tips.js}"></script>
<script type="text/javascript" th:inline="javascript" sec:authorize="isAuthenticated()">
    $(function () {
        $("#isfol").children("div").each(function (index,value) {
            isf([[${session.loginUser.getUid()}]],$(value).find(".fid").text(),value);
        })
    })
</script>
</body>
</html>